<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/jquery-3.4.1.min.js"></script>
  <link rel="stylesheet" href="/css1/bootstrap.min.css">
  <script src="/js1/bootstrap.min.js"></script>
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">



</head>
<body>

<div>
  <p>这是最基本的表单</p>
</div>


<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/pagejs/student/list.js"></script>
<script>
  /**
   * 刷新数据
   */
  function resetList(){
    loadTable();
    $("#exampleInputName2").val(" ")
  }

  /**
   * 根据姓名查询学生
   */
  function getList(){
    var name = $("#exampleInputName2").val().toString();
    if(name == null || name == ""){
      alert("请输入要查询的姓名");
    } else{

      console.log(name)
      $.ajax({
        url: "/webapi/student/getList/" + name,
        method: "get"
      }).done(function (rs){
        let len = rs.length;
        if(len == 0){
          alert("查无此人");
        } else{
          let html = "";
          for(let i = 0; i < len; i++){
            let item = rs[i];
            html+="<tr>"
                    +"<td>"+item.id+"</td>"
                    +"<td>"+item.sno+"</td>"
                    +"<td>"+item.sname+"</td>"
                    +"<td>"+item.sex+"</td>"
                    +"<td>"+item.score+"</td>"
                    +"<td> "
                    +"<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+item.id+");'>编辑</a>   "
                    +"<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+item.id+")'>删除</a>"
                    +"</td>"
                    +"</tr>"
            $("#studentTb").html(html)
          }
        }



      })

    }


  }

  /**
   * 与表进行判断查询
   */
  // function getList(){
  //     var name = $("#exampleInputName2").val().toString();
  //     // alert(name)
  //     console.log(name)
  //     $.ajax({
  //         url: "/webapi/student/list",
  //         method:"get"
  //     }).done(function (rs){
  //         // loadTable();
  //         // console.log(name);
  //         let len = rs.length;
  //         let html = "";
  //         for(let i = 0; i < len; i++){
  //             let item = rs[i];
  //            if(item.sname == name){
  //                html+="<tr>"
  //                    +"<td>"+item.id+"</td>"
  //                    +"<td>"+item.sno+"</td>"
  //                    +"<td>"+item.sname+"</td>"
  //                    +"<td>"+item.sex+"</td>"
  //                    +"<td>"+item.score+"</td>"
  //                    +"<td> "
  //                    +"<a href='#' onclick='editStudent("+item.id+");'>编辑</a>   "
  //                    +"<a href='#' onclick='deleteStudent("+item.id+")'>删除</a>" +
  //                    "</td>"
  //                    +"</tr>"
  //                $("#studentTb").html(html)
  //            }else if(name == " " || name == null){
  //                loadTable()
  //            }
  //         }
  //     })
  //
  // }

  /**
   * 根据id删除学生
   * @param id
   */
  function deleteStudent(id){
    if(confirm("您是否真的要删除吗？")){
      $.ajax({
        url:"/webapi/student/delete/"+id,
        method:"delete"

      }).done(function (){
        loadTable();
      })
    }
  }

  /**
   * 根据id判断是新增还是更新，判断之后做新增和更新操作
   */
  function saveStudent(){
    var data = $('#formStudent').serialize();

    var id = $("#id").val();

    if(id < 1) {

      //是新增
      $.ajax ({
        url:"/webapi/student/insert",
        method:"post",
        data:data
      }).done(function () {

        loadTable();

        $('#exampleModal').modal('hide');
      });
    }
    else {

      //是更新
      $.ajax ({

        url:"/webapi/student/update",
        method:"put",

        data:data

      }).done(function () {

        loadTable();

        $('#exampleModal').modal('hide');
      });
    }
  }

  /**
   * 点击新增时给id赋值，以便判断做新增操作
   */
  function preAdd(){
    $("#id").val(0);//提示新增
    $("#sno").val("");
    $("#sname").val("");
    $("#sex").val("");
    $("#score").val("");
  }

  function addStudent(){
    var data = $("#formStudent").serialize();
    $.ajax({
      url: "/webapi/student/insert",
      method:"post",
      data:data
    }).done(function (){
      loadTable();
      $('#exampleModal').modal('hide')
    })
  }

  /**
   * 根据id编辑学生，同时读取学生信息
   * @param id
   */
  function editStudent(id){
    $('#exampleModal').modal('show')
    $.ajax({
      url:'/webapi/student/get/'+id
    }).done(function (rs){

      $("#id").val(rs.id);
      $("#sno").val(rs.sno);
      $("#sname").val(rs.sname);
      $("#sex").val(rs.sex);
      $("#score").val(rs.score);

    })
  }

  /**
   * 显示整个学生列表
   */
  function loadTable(){
    $.ajax({
      url:"/webapi/student/list"
    }).done(function (rs){
      let len = rs.length;
      let html = "";
      for(let i = 0; i < len; i++){
        let item = rs[i];
        html+="<tr>"
                +"<td>"+item.id+"</td>"
                +"<td>"+item.sno+"</td>"
                +"<td>"+item.sname+"</td>"
                +"<td>"+item.sex+"</td>"
                +"<td>"+item.score+"</td>"
                +"<td> "
                +"<a href='#' onclick='editStudent("+item.id+");'>编辑</a>   "
                +"<a href='#' onclick='deleteStudent("+item.id+")'>删除</a>" +
                "</td>"
                +"</tr>"
      }
      $("#studentTb").html(html)
    })
  }

  $(function(){
    loadTable()
  })
</script>

</body>
</html>